<template>
    <div-row :obj="obj" class="content-wrapper text-picture">
        <el-row :gutter="obj.gutter">
            <el-col>
                <h1 class="title text-center" v-html="obj.title"/>
            </el-col>
            <el-col :span="24/obj.columns" v-for="(item,index) in obj.imgTextBox" :key="index">
                <div @click="goClick(item.httpUrl)">
                    <div class="icon-box image" :class="obj.animateImg? 'wow '+obj.animateImg : ''">
                        <i :style="{fontSize: obj.fontSize+'px',color:item.backgroundColor}" class="iconfont" :class="item.iconClass"/>
                    </div>
                    <div class="text-box">
                        <h2 class="text-title text-center" :class="obj.animateTitle? 'wow '+obj.animateTitle : ''" v-html="item.title"/>

                        <p class="text-desc text-center" :class="obj.animateText? 'wow '+obj.animateText : ''" v-html="item.desc"/>

                    </div>
                </div>
            </el-col>
        </el-row>
    </div-row>
</template>
<script>
import animate from '@/mixins/animate'
export default {
    name: 'IconColumns',
    mixins: [animate]

}
</script>
<style lang="scss" scoped>
    .content-wrapper{
        .title{
            padding: 10px 0;
        }
        .icon-box{
            padding: 15px 0 10px 0;
            transition: 500ms all ease;
            .iconfont{
                font-size: 80px;
                &:hover{
                    font-size: 120px;
                }
            }

        }
        .image{
            overflow: hidden;
            position: relative;
            margin: 0 auto;
            text-align: center;
            img{
                height: 240px;
                object-fit: cover;
                margin: auto;
                width: 100%;
                display: block;
                transform:scale(1);
                transition: 1s all ease;
                &:hover{
                    transform:scale(1.2);
                }
            }
        }
        .text-box{
            .text-title,.text-desc{
                text-align: left;
                overflow: hidden;
                text-overflow:ellipsis;
            }
            .text-title{
                padding: 15px;
                white-space: nowrap;
            }
            .text-desc{
                display: -webkit-box;
                -webkit-line-clamp: 3;
                -webkit-box-orient: vertical;
                line-height: 20px;
                min-height: 60px;
                font-size: 13px;
            }
        }
    }
</style>

